<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link rel="stylesheet" href="css/reset.css">
	<script  src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.qqFace.js"></script>
</head>
<body>
<div>
	<div id="history" style="overflow:auto;width: 600px;height: 300px; border:1px solid black;"></div>
	<div id="message" contentEditable="true" style="width:600px; height: 50px;">
	</div>
	<div class="input" id="saytext" name="saytext" style="opacity: 0;"></div>
	<div contentEditable="true" id="test" style="border:1px solid blue;width: 100px; height: 100px;"></div>
	<span class="emotion">表情</span>
	<button id="send_msg">Send</button>
</div>
<script type="text/javascript">
	//localStorage sessionStorage
	var ws = new WebSocket("ws://192.168.1.176:30000");

	ws.onopen = function(){
		console.log("websocket is opening!");
	}

	ws.onmessage = function(event){
		var receive_msg = event.data;
		
		receive_msg = "<span>" + receive_msg + "</span>" + "<br/>";
		receive_msg = replace_em(receive_msg);
		
		$("#history").html($("#history").html() + receive_msg);
		$("#history").scrollTop($("#history").get(0).scrollHeight);
	}

	function replace_em(str){
		str = str.replace(/\n/g,'<br/>');
		str = str.replace(/\[em_([0-9]*)\]/g,'<img src="arclist/$1.gif" border="0" />');
		return str;
	}	

	$('.emotion').qqFace({
		id : 'facebox', 
		assign:'saytext', 
		dest:"test",
		path:'arclist/'	//表情存放的路径
	});

	$(document).keydown(function(e){
		if(e.which == 13){
			$("#send_msg").trigger("click");
		}
	});

	$("#send_msg").click(function(){
		// var msg = $("#message").text();
		// ws.send(msg);
		// $("#message").text("");
		var str = $("#test").html();
		ws.send(str);
		$("#test").html("");
		//$("#history").html(replace_em(str));
	});
		//把这个msg提交到服务器
		//HTTP(Form表单 Ajax) 都不是实时的 / TCP(Socket Websocket)
</script>
</body>
</html>